<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性-基本例子</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
    <!-- 计算属性-->
    <!-- 复杂逻辑不在视图显示，而是在方法中调用，如字符反转-->
    <p>{{message}}</p>
    <p>{{reversedMessage }}</p>

    <!-- 侦听属性watch-->
    <p>{{fullName}}</p>
</div>



<script>

    var app = new Vue({
        el: '#app',
        data: {//data的数据从json中获取，解决跨域问题
            message:"Hello Alice!!",
            firstName:'alice',
            lastName:'Rachel'
        },
        methods:{

        },
        computed:{//计算属性和data内数据相对于，data变化，方法返回的数据也变化
            reversedMessage:function () {
                return this.message.split('').reverse().join()
            },
            fullName:function () {
                return this.firstName + ' ' + this.lastName
            }
        }
        //每次都执行方法，计算属性只有第一次执行其他都是读缓存

    });

</script>
</body>
</html>
